<div class="modal-header">
    <button type="button" class="close" ng-click="closeModal()">&times;
        <small class="font-75em" style="font-weight: normal">Close</small>
    </button>
    <span class="bebas modal-title" style="color: #657B83;font-size: 19px">
        <i class="fa fa-share-alt"></i> &nbsp;Share <span
            style="color:#000000;">{{folder.folderName}}</span> With Others</span>
</div>

<div class="modal-body" style="background-color: #f1f1f1">
    <span class="cursor_pointer" ng-click="setPropagatePermission(folder)">
        <i class="fa fa-fw"
           ng-class="{'fa-square-o':!folder.propagatePermission, 'fa-check-square-o':folder.propagatePermission}"></i> Propagate permissions to contained parts
    </span>
    <i class="fa fa-question-circle opacity_hover"
       uib-tooltip="Persists permissions set below to any parts that are added to the folder; even after they are removed from the folder"
       tooltip-placement="right"></i>

    <br><br>

    <span class="text-muted font-90em"
          ng-if="permissions.length">Current permissions: {{permissions.length | number}}</span>

    <div ng-if="canSetPublicPermission" class="pull-right cursor_pointer font-12em"
         ng-class="{'opacity_4': !folder.publicReadAccess}"
         style="margin-right: 10px" ng-click="enableDisablePublicRead()">
        <i class=" fa fa-fw fa-globe"></i>
        <small>Public Access</small>
        <i class="fa fa-fw font-11em"
           ng-class="{'fa-toggle-off': !folder.publicReadAccess, 'fa-toggle-on green': folder.publicReadAccess}"></i>
    </div>

    <table cellpadding="0" cellspacing="0" style="width: 560px; border-top: 1px solid #CCCCCC; background-color: white">
        <tr>
            <td>
                <div style="overflow: auto; max-height: 200px; border-bottom: 1px solid #CCCCCC">
                    <div ng-if="permissions.length == 0" class="pad-8">
                        <i class="text-muted">No available permissions</i>
                    </div>
                    <table class="table table-hover">
                        <tr ng-repeat="permission in permissions">
                            <td style="vertical-align: middle; width: 45px;">
                                <i class="fa font-14em"
                                   ng-class="{'fa-user dark-gray': permission.article=='ACCOUNT',
                                   'fa-group dark-orange':permission.article=='GROUP',
                                   'fa-globe dark_blue':permission.article=='REMOTE'}"></i>
                            </td>
                            <td style="vertical-align: middle; line-height: 120%">
                                {{permission.display}}<br>
                                <small class="text-muted" ng-if="permission.account && !permission.partner">
                                    {{permission.account.email}}
                                </small>
                                <small class="text-muted" ng-if="permission.group">{{permission.group.description |
                                    truncate:30}}
                                </small>
                                <small class="text-muted" ng-if="permission.partner">{{permission.partner.url}}
                                </small>
                            </td>
                            <td style="text-align: center; line-height: 90%">
                                <span>
                                   <i class="fa fa-fw  font-14em"
                                      ng-class="{'fa-eye': permission.canRead, 'fa-pencil': permission.canWrite}"></i>
                                    <br>
                                    <small class="text-muted" ng-if="permission.canWrite">can edit</small>
                                    <small class="text-muted" ng-if="permission.canRead">can view</small>
                                    <!--<span class="caret" ng-if="folder.canEdit"></span>-->
                                </span>
                            </td>
                            <td style="width: 45px; vertical-align: middle">
                                <i class="fa fa-trash-o delete_icon" ng-if="folder.canEdit"
                                   ng-click="removePermission(permission)"></i>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>

        <tr>
            <td class="permission_footer" style="border-left: 0;">
                <span class="text-muted font-75em">Add {{newPermission.article.toLowerCase()}} permission</span> <br>

                <div class="btn-group" uib-dropdown>
                    <button class="btn btn-sm btn-default" uib-dropdown-toggle>
                        <i class="fa fa-fw font-14em"
                           ng-class="{'fa-user dark-gray':newPermission.article =='ACCOUNT',
                           'fa-group dark-orange':newPermission.article=='GROUP',
                            'fa-globe dark_blue':newPermission.article=='REMOTE'}"></i>
                        <span class="caret"></span>
                    </button>

                    <ul uib-dropdown-menu>
                        <li><a href="#" ng-click="setPermissionArticle('account')"><i
                                class="fa fa-fw fa-user dark-gray"></i> Account</a></li>
                        <li><a href="#" ng-click="setPermissionArticle('group')"><i
                                class="fa fa-fw fa-group dark-orange"></i> Group</a></li>
                        <li><a href="#" ng-click="setPermissionArticle('remote')"><i
                                class="fa fa-fw fa-globe dark_blue"></i> Remote Account</a></li>
                    </ul>
                </div>

                <script type="text/ng-template" id="customTemplate.html">
                    <a class="font-90em">
                        <span ng-bind-html="match.model.firstName + ' ' + match.model.lastName | uibTypeaheadHighlight:query"></span>

                        <div ng-bind-html="match.model.email | uibTypeaheadHighlight:query"
                             style="font-size: 12px; color: #aaa; margin-top: -3px;"></div>
                    </a>
                </script>
                <input type="text" class="input_box" style="width: 200px; padding: 6px"
                       placeholder="{{placeHolder}}" ng-model="userFilterInput"
                       typeahead-loading="loadingAddExistingData"
                       uib-typeahead="result for result in filter($viewValue)"
                       typeahead-editable="true" typeahead-template-url="customTemplate.html"
                       typeahead-on-select="userSelectionForPermissionAdd($item, $model, $label)">

                <div class="btn-group font-80em">
                    <span class="cursor_pointer" ng-click="setPermission(false)">
                        <i class="fa fa-fw"
                           ng-class="{'fa-circle-o': !newPermission.canRead, 'fa-check-circle' : newPermission.canRead}"></i>
                    can view</span>
                    <br>

                    <span class="cursor_pointer" ng-click="setPermission(true)">
                        <i class="fa fa-fw" ng-class="{'fa-circle-o': !newPermission.canWrite,
                        'fa-check-circle' : newPermission.canWrite}"></i> can edit
                    </span>
                </div>

                &nbsp;

                <div class="btn-group" ng-if="webPartners.length && newPermission.article.toLowerCase() == 'remote'"
                     uib-dropdown>
                    <button type="button" class="btn btn-sm btn-link" style="line-height: 98%; text-align: left"
                            uib-dropdown-toggle>
                        <span ng-if="!newPermission.partner">Select Registry <span class="caret"></span></span>
                        <span ng-if="newPermission.partner">{{newPermission.partner.name}}
                            <span class="caret" style="color: black"></span><br>
                            <small>{{newPermission.partner.url}}</small></span>
                    </button>

                    <ul uib-dropdown-menu>
                        <li ng-repeat="partner in webPartners">
                            <a href="#" class="font-85em" ng-click="newPermission.partner=partner"
                               style="line-height: 95%">{{partner.name}}<br>
                                <small class="text-muted">{{partner.url}}</small>
                            </a>
                        </li>
                    </ul>
                </div>

                <button type="button" ng-click="addNewPermission()" ng-disabled="disablePermissionAdd()"
                        class="btn btn-sm btn-primary pull-right">Add
                </button>

                <!--ng-disabled="!newPermission.articleId"-->
            </td>
        </tr>
    </table>
</div>